<template>
  <div class="content">
    <div class="top">
      <!-- <img
        :src="orderType !== 'type' ? goodsForm.goodsImage : goods.goodsImg"
        mode="scaleToFill"
      />-->
      <img v-if="orderType === 'type'" :src="goods.goodsImg" mode="scaleToFill" />
      <img v-else :src="form.goodsImg" mode="scaleToFill" />
      <span>{{form.goodsName}}</span>
    </div>
    <div class="zhan"></div>
    <div class="list">
      <div class="cont">
        <span>商品类型</span>
        <div class="right" @click="handleStateClick">
          <!-- <picker
            class="filter-picker"
            :range="swiperList"
            range-key="goodsTypeName"
            :value="shopTypeIndex"
            :disabled="orderType !== 'type'"
            @change="handleStateChange"
          >-->
          <span :class="!typeId ? 'pitch-on' : ''">{{goodsTypeName2}}</span>
          <!-- </picker> -->
          <i-icon type="enter" size="16" color="#838383" />
        </div>
      </div>
    </div>
    <div class="list2">
      <div class="cont" v-for="(item,index) in formList" :key="index">
        <div v-if="!item.isShowMoney">
          <span>{{item.label}}</span>
          <div class="right" v-if="item.isInput">
            <input
              type="digit"
              v-model="form[item.key]"
              placeholder="请输入"
              :disabled="item.disabled"
            />
            <span>{{item.slot}}</span>
          </div>
          <div class="right" v-else>
            <picker
              class="filter-picker"
              :range="goodsExpressList"
              range-key="expressName"
              :value="goodsExpressIndex"
              :disabled="item.disabled"
              @change="handleExpressChange"
            >
              <span
                :class="goodsExpressName === '请选择' ? 'pitch-on' : ''"
              >{{goodsExpressName}}</span>
            </picker>
            <i-icon type="enter" size="16" color="#838383" />
          </div>
        </div>
        <div class="showPre" v-if="item.isShowMoney">
          <div>
            <span>{{item.label}}</span>
            <input
              type="number"
              v-model="form[item.key]"
              placeholder="请输入"
              :disabled="item.disabled"
            />
            <span>{{item.slot}}</span>
          </div>
          <p>{{item.showMoneyValue ? item.showMoneyValue : ''}}元</p>
        </div>
      </div>
    </div>
    <p
      class="hintText"
    >例：如果您的赊货锁额比例设置为40%，供货价￥100.00，商家每购买一件您的商品需要被锁定余额，￥40.00，纸质商家售出或退货；如到达赊货锁额扣除时限商家未售出，所有赊货锁额将从商户月扣除给您</p>
    <button class="btn" @click="submitClick">{{btnText}}</button>
    <div class="select-type-box" v-if="isSelectType">
      <div class="cont">
        <p class="title">选择平台类型</p>
        <i-collapse :name="typeId" accordion>
          <i-collapse-item
            i-class="collapse-item"
            i-class-title="collapse-item"
            style="text-align: center;"
            v-for="(item,index) in swiperTypeList"
            :key="index"
            :title="item.goodsTypeName"
            :name="item.id"
          >
            <div
              v-for="(e,i) in item.list"
              :key="i"
              class="select-cont"
              :class="{ selected: typeId === e.id }"
              slot="content"
              @click="selectTypeClick(e)"
            >{{e.goodsTypeName}}</div>
          </i-collapse-item>
        </i-collapse>
      </div>
      <button class="btn" @click="handelSelecetClick">确认</button>
      <div class="zz" @click="handelHideSelecetClick"></div>
    </div>
  </div>
</template>

<script>
import {
  FIND_STOCK_ORDER_INFO,
  FIND_STOCK_GOODS_INFO,
  FIND_SHOP_GOODS_INFO,
  FIND_SHOP_EXPRESS_TEMPLATE_LIST,
  ADD_STOCK_GOODS_API,
  UPDATE_GOODS_SHELF,
  CANCEL_GOODS_CHECK,
  FIND_GOODS_TYPE_LIST_API,
  FIND_SHOP_PLATFORM_TYPE_LIST_API
} from '@/api'
import { getCurrentPageParams } from '@/utils'

export default {
  components: {},
  props: {},
  data () {
    return {
      form: {},
      goods: {},
      swiperList: [],
      shopTypeIndex: 0,
      goodsTypeName: '请选择',
      goodsExpressList: [],
      goodsExpressIndex: 0,
      goodsExpressName: '请选择',
      orderType: '',
      swiperTypeList: [],
      isSelectType: false,
      typeId: '',
      goodsTypeName2: '请选择',
      copyName: ''
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    btnText () {
      if (this.orderType === 'shop') {
        return '下架商品'
      } else if (this.orderType === 'check') {
        return '取消审核'
      } else {
        return '完成'
      }
    },
    isAddInit () {
      if (this.$cookie.get('choose-goods-type')) {
        return true
      } else {
        return false
      }
    },
    orderForm () {
      return {
        ...this.form
      }
    },
    formList () {
      return [
        {
          label: '供货价',
          isInput: true,
          valie: this.form.stockSupplyCost,
          key: 'stockSupplyCost',
          isShow: false,
          isShowMoney: '',
          slot: '元',
          disabled: this.orderType !== 'type'
        },
        {
          label: '供货库存',
          isInput: true,
          // valie: this.form.stockSupplyNum,
          valie: this.form.goodsStock, // to do 同步进货圈商品库存
          key: 'stockSupplyNum',
          isShow: false,
          isShowMoney: '',
          slot: '件',
          disabled: this.orderType !== 'type'
        },
        {
          label: '最大进货库存',
          isInput: true,
          valie: this.form.maxStockNum,
          key: 'maxStockNum',
          isShow: false,
          isShowMoney: '',
          slot: '件',
          disabled: this.orderType !== 'type'
        },
        {
          label: '运费模板',
          isInput: false,
          valie: this.form.expressId,
          key: 'expressId',
          isShow: false,
          isShowMoney: '',
          slot: '元',
          disabled: this.orderType !== 'type'
        },
        {
          label: '赊货锁额比例',
          isInput: true,
          valie: this.form.stockCreditPre,
          key: 'stockCreditPre',
          isShowMoney: true,
          // showMoneyValue:
          //   this.form.stockSupplyNum *
          //   this.form.stockSupplyCost *
          //   (this.form.stockCreditPre * 0.01),
          // to do 同步安卓
          showMoneyValue:
          this.form.stockCreditPre ? (this.form.stockSupplyCost * (this.form.stockCreditPre * 0.01)).toFixed(2) : 0,
          slot: '%',
          disabled: this.orderType !== 'type'
        }
      ]
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.init()
    this.orderType = getCurrentPageParams('orderType')
    this.getGoodsExpressList()
    if (getCurrentPageParams('orderType') === 'type') {
      this.getAddShopInfo()
    } else if (
      getCurrentPageParams('orderType') === 'shop' ||
      getCurrentPageParams('orderType') === 'check'
    ) {
      this.getStockGoodsInfo()
    } else {
      this.getStockOrderInfo()
    }
  },
  methods: {
    handleStateClick () {
      if (this.orderType !== 'type') {
        return false
      }
      this.isSelectType = true
    },
    selectTypeClick (e) {
      this.typeId = e.id
      this.copyName = e.goodsTypeName
    },
    handelSelecetClick () {
      if (!this.typeId) {
        this.$toast('尚未选择类型')
        return false
      }
      this.goodsTypeName2 = this.copyName
      this.form.goodsPlatformTypeId = this.typeId
      this.isSelectType = false
    },
    handelHideSelecetClick () {
      this.typeId = ''
      this.copyName = ''
      this.isSelectType = false
    },
    handleStateChange (e) {
      const vm = this
      vm.shopTypeIndex = e.target.value
      vm.goodsTypeName = vm.swiperList[e.target.value].goodsTypeName
      vm.form.goodsTypeId = vm.swiperList[e.target.value].goodsTypeId
    },
    handleExpressChange (e) {
      const vm = this
      vm.goodsExpressIndex = e.target.value
      vm.goodsExpressName = vm.goodsExpressList[e.target.value].expressName
      vm.form.expressId = vm.goodsExpressList[e.target.value].expressId
    },
    submitClick () {
      const vm = this
      if (vm.orderType === 'shop') {
        vm.$dialog('确认下架此商品', '').then(() => {
          vm.updateGoodsShelf()
        })
      } else if (vm.orderType === 'check') {
        vm.$dialog('确认取消此商品审核', '').then(() => {
          vm.cancelGoodsCheck()
        })
      } else {
        vm.$dialog('确认添加此商品', '').then(() => {
          if (!vm.typeId) {
            vm.$toast('商品类型不能为空')
            return false
          }
          vm.addStockGoodsApi()
        })
      }
    },
    init () {
      const vm = this
      vm.form = {}
      vm.goods = {}
      vm.swiperList = []
      vm.shopTypeIndex = 0
      vm.goodsTypeName = '请选择'
      vm.goodsExpressList = []
      vm.goodsExpressIndex = 0
      vm.goodsExpressName = '请选择'
      vm.swiperTypeList = []
      vm.typeId = ''
      vm.goodsTypeName2 = ''
      vm.copyName = ''
      // vm.findGoodsTypeListApi()
      vm.getDisShopList()
    },
    /** api **/
    addStockGoodsApi () {
      const vm = this
      let params = { ...vm.form }
      params.goodsKind = 'NORMAL'
      ADD_STOCK_GOODS_API(params)
        .then(r => {
          if (r.data.code === '0') {
            let label = '已发起上架申请，等待审核'
            let btnText = '点击查看'
            vm.$router.push(
              `/pages/data-analyze/stock/succeed/main?label=${label}&btnText=${btnText}&type=type`
            )
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    updateGoodsShelf () {
      const vm = this
      let params = {
        isShelf: '0',
        shopId: vm.form.shopId,
        state: '1'
      }
      params.goodsNoList = []
      params.goodsNoList.push(vm.form.goodsNo)
      UPDATE_GOODS_SHELF(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('下架商品成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    cancelGoodsCheck () {
      const vm = this
      let goodsNoList = []
      goodsNoList.push(vm.form.goodsNo)
      CANCEL_GOODS_CHECK(goodsNoList, vm.form.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('下架商品成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    findGoodsTypeListApi () {
      const vm = this
      FIND_GOODS_TYPE_LIST_API(vm.account.shopId, 0)
        .then(r => {
          if (r.data.code === '0') {
            vm.swiperList = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getDisShopList () {
      const vm = this
      let params = {
        providerId: vm.$store.state.account.providerId,
        isShow: '1', // 1/0 显示/隐藏
        parentId: 0
      }
      FIND_SHOP_PLATFORM_TYPE_LIST_API(params)
        .then(r => {
          if (r.data.code === '0') {
            // if (r.data.data.length) {
            //   vm.typeId = r.data.data[0].id
            // } else {
            //   vm.typeId = ''
            // }
            r.data.data.forEach(_ => {
              _.list = []
              vm.swiperTypeList.push(_)
              vm.getDisShopList2(_)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getDisShopList2 (item) {
      const vm = this
      let params = {
        providerId: vm.$store.state.account.providerId,
        isShow: '1', // 1/0 显示/隐藏
        parentId: item.id
      }
      FIND_SHOP_PLATFORM_TYPE_LIST_API(params)
        .then(r => {
          if (r.data.code === '0') {
            r.data.data.forEach(_ => {
              item.list.push(_)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getAddShopInfo () {
      const vm = this
      FIND_SHOP_GOODS_INFO(
        getCurrentPageParams('goodsNo') || '364827378272174080'
      )
        .then(r => {
          if (r.data.code === '0') {
            vm.goods = r.data.data
            vm.form = { ...r.data.data }
            for (let i = 0; i < vm.swiperList.length; i++) {
              if (vm.swiperList[i].goodsTypeId === vm.form.goodsTypeId) {
                vm.shopTypeIndex = i
                vm.goodsTypeName = vm.swiperList[i].goodsTypeName
                break
              }
            }
            for (let i = 0; i < vm.goodsExpressList.length; i++) {
              if (vm.goodsExpressList[i].expressId === vm.form.expressId) {
                vm.goodsExpressIndex = i
                vm.goodsExpressName = vm.goodsExpressList[i].expressName
                break
              }
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getGoodsExpressList () {
      const vm = this
      // FIND_SHOP_EXPRESS_TEMPLATE_LIST(vm.$store.state.account.shopId)
      FIND_SHOP_EXPRESS_TEMPLATE_LIST(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.goodsExpressList = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getStockOrderInfo () {
      const vm = this
      FIND_STOCK_ORDER_INFO(
        getCurrentPageParams('goodsNo') || '414096436796325888'
      )
        .then(r => {
          if (r.data.code === '0') {
            let obj = {}
            if (r.data.data) {
              obj = r.data.data.orderGoodsList
                ? r.data.data.orderGoodsList[0]
                : {}
            }
            vm.form = { ...r.data.data, ...obj }
            if (!vm.form.goodsNo) {
              return false
            }
            // vm.getStockGoodsInfo(vm.form.orderNo) // 20200309注释了
            vm.getGoodsInfo(vm.form.goodsNo)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getStockGoodsInfo (goodsNo) {
      const vm = this
      FIND_STOCK_GOODS_INFO(goodsNo || getCurrentPageParams('goodsNo'))
        .then(r => {
          if (r.data.code === '0') {
            vm.goods = r.data.data
            vm.form = { ...r.data.data }
            for (let i = 0; i < vm.swiperList.length; i++) {
              if (vm.swiperList[i].goodsTypeId === vm.form.goodsTypeId) {
                vm.shopTypeIndex = i
                vm.goodsTypeName = vm.swiperList[i].goodsTypeName
                break
              }
            }
            for (let i = 0; i < vm.goodsExpressList.length; i++) {
              if (vm.goodsExpressList[i].expressId === vm.form.expressId) {
                vm.goodsExpressIndex = i
                vm.goodsExpressName = vm.goodsExpressList[i].expressName
                break
              }
            }
            vm.goodsTypeName2 = vm.form.paltformTypeName
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getGoodsInfo (goodsNo) {
      const vm = this
      FIND_SHOP_GOODS_INFO(goodsNo)
        .then(r => {
          if (r.data.code === '0') {
            // 销售数量
            if (r.data.data) {
              if (r.data.data.saleNum) {
                let { saleNum } = r.data.data
                vm.saleNum = saleNum
              } else {
                vm.saleNum = 0
              }
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  // height: auto;
  background: #f6f8f9;
  > .top {
    width: 100%;
    background: #fff;
    > img {
      width: 100%;
      height: 260px;
    }
    > span {
      font-size: 14px;
      color: #000;
      font-weight: 600;
      display: block;
      width: 90%;
      margin: auto;
      line-height: 40px;
    }
  }
  > .zhan {
    height: 10px;
  }
  > .list {
    width: 100%;
    background: #fff;
    > .cont {
      width: 90%;
      height: 40px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      font-size: 14px;
      > .right {
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        > .filter-picker {
          color: #000;
          > .pitch-on {
            color: #838383;
          }
        }
      }
    }
  }
  > .list2 {
    width: 100%;
    background: #fff;
    margin-bottom: 20px;
    > .cont {
      width: 100%;
      border-bottom: 1px solid #f4f6f8;
      > div {
        width: 90%;
        height: 40px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        > .right {
          display: flex;
          align-items: center;
          > input {
            text-align: right;
            color: #000;
            margin-right: 5px;
          }
          > span {
            color: #838383;
          }
          > .filter-picker {
            color: #000;
            > .pitch-on {
              color: #838383;
            }
          }
        }
      }
      > .showPre {
        display: flex;
        align-items: center;
        justify-content: space-between;
        > div {
          display: flex;
          align-items: center;
          > input {
            width: 50px;
            text-align: left;
            color: #000;
            margin-left: 5px;
          }
        }
        > p {
          color: #838383;
        }
      }
    }
  }
  > .hintText {
    width: 90%;
    margin: auto;
    font-size: 12px;
    color: #ef341c;
  }
  > .btn {
    width: 95%;
    margin: 50px auto;
    height: 45px;
    font-size: 14px;
    color: #fff;
    line-height: 45px;
    border-radius: 25px;
    background: linear-gradient(to right, $new-red-tint, $new-red-dark);
  }
  > .select-type-box {
    > .cont {
      width: 70%;
      height: 350px;
      overflow-y: auto;
      background: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 6;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      padding-bottom: 15px;
      > .title {
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        line-height: 40px;
      }
      .collapse-item {
        font-size: 14px;
        line-height: 30px;
      }
      .select-cont {
        font-size: 14px;
        line-height: 30px;
        border-bottom: 1px solid #939393;
        &.selected {
          color: #ea435f;
        }
      }
    }
    > .btn {
      width: 70%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin: 0;
      padding: 0;
      font-size: 14px;
      position: absolute;
      left: 50%;
      top: calc(50% + 185px);
      transform: translate(-50%, 0);
      z-index: 6;
    }
    > .zz {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: #000000;
      opacity: 0.3;
    }
  }
}
</style>
